<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>2.分析生命周期</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<div id="demo">
			<h2>当前求和为：{{sum}}</h2>
			<button @click="add" id="btn">点我+1</button>	
			<button @click="death">毁掉vm!</button>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false
		
		const vm = new Vue({
			el:'#demo',
			data:{
				sum:0
			},
			methods:{
				add(){
					console.log('add方法执行了！')
					this.sum++
				},
				death(){
					this.$destroy()
				}
			},
			watch:{
				sum(){
					// console.log('sum变了')
				}
			},
			//初始化之前
			beforeCreate(){
				// console.log('beforeCreate',this)
				// debugger;
				this.projectName = '教务管理系统'
			},
			//初始化完毕
			created(){
				// console.log('created',this)
				// debugger;
			},
			//挂载之前
			beforeMount(){
				// console.log('beforeMount',this.$el)
				// document.getElementById('btn').innerText = 123
				// debugger;
			},
			//挂载完毕
			mounted(){
				// console.log('mounted',this.$el)
				// debugger;
			},
			//更新之前
			beforeUpdate(){
				// console.log('beforeUpdate',this)
				// debugger;
			},
			//更新完毕
			updated(){
				// console.log('updated',this)
				// debugger;
			},
			//销毁之前
			beforeDestroy(){
				console.log('beforeDestroy',this)
				// console.log(this.sum)
				// this.add()
				// debugger;
			},
			destroyed(){
				console.log('destroyed',this)
			}
		})
	</script>
</html>